<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="queryForm.orgName" placeholder="请输入公司名称"/>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="物业公司管理">
            <template #actions>
                <!-- <el-button >导出数据</el-button>
                <el-button >导入数据</el-button> -->
                <el-button class="ed-button ed_black-bottom ed-button36" v-has="'basic:company:add'" @click="add()"><svg-icon icon-class="add-svg"/>添加物业公司</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="orgId" label="物业公司ID"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="orgName" label="公司名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" :formatter="formatDate"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="openPay" label="是否开通支付">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['openPay'], paySetParams.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="contactName" label="联系人"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="contactPhone" label="联系电话"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="status" label="状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row['status']==1?'启用':'停用' }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="licenseTime" label="营业期限"></el-table-column> -->
                <el-table-column width="250" :show-overflow-tooltip="true" prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" v-has="'basic:company:update'" @click="updateRow(scope.row)">编辑</el-button>
                        <el-button class="ed-table-bottom ed_green_border" v-has="'basic:company:paySet'" @click="paySetRow(scope.row)">配置</el-button>
                        <!-- <el-button class="ed-table-bottom ed_delete_border" v-has="'basic:company:delete'" @click="del(scope.row)">删除</el-button> -->
                        <el-button v-if="scope.row.status==1" class="ed-table-bottom ed_delete_border" v-has="'basic:company:stop'" @click="status(scope.row)">停用</el-button>
                        <el-button v-else class="ed-table-bottom ed_delete_border" v-has="'basic:company:enable'" @click="status(scope.row)">启用</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <EdConfirmDelete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue"></EdConfirmDelete>
    </Page>
</template>

<script>
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import { defineComponent } from 'vue'
import {companyList, companyDetele, enable} from "./api";
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import { returnName } from "src/utils/common.js";

export default defineComponent({
    name: 'company',
    components: { Page, PageCard, ApiTable, EdConfirmDelete },
    data() {
        return {
            queryForm: {
                orgName: ""
            },
            confirmRow:{},
            paySetParams: {
                options: [
                    {
                        value: '1',
                        label: '是',
                    },
                    {
                        value: '0',
                        label: '否',
                    },
                ]
            }
        }
    },
    activated(){
        this.$nextTick(() => {
            this.$refs.table.load(1)
        })
    },
    methods: {
        tableApi: companyList,
        // tableApi(params) {
        //     console.log(params)
        // },
        search(){
            // console.log('search-->', this.queryForm)
            this.$refs.table.load(1)
        },
        reset(){
            this.queryForm.orgName = '';
            this.$nextTick(() => {
                this.$refs.table.load(1, 10);
            })
        },
        add(){
            this.$router.push({
                path: '/basic/company-add'
            })
        },
        updateRow(row){
            this.$router.push({
                path: '/basic/company-update',
                query: { id: row.orgId },
            })
        },
        // 支付设置
        paySetRow(row){
            this.$router.push({
                path: '/basic/company-payset',
                query: { id: row.orgId },
            })
            // companyPaySet({id: row.orgId}).then(response => {
            //     if(response.code == 20000) {
            //         this.$message.success({
            //             message: '设置成功！',
            //             duration: 2000,
            //             center:true
            //         });
            //         this.$refs.table.load(1)
            //     }
            // })
        },
        del(row){
            this.confirmRow = row;
            this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
        },
        returnName(val, options){
            return returnName(val, options)
        },
        formatDate(row, column) {
                // 获取单元格数据
                let date = row[column.property];
                if (date) {
                    return this.transformDate(date)
                } else {
                    return ''
                }
        },
        //标准时间格式转yyyy-MM-dd HH:mm:ss
        transformDate(date) {
            if (date) {
                let dt = new Date(date);
                return dt.getFullYear() + '-' +
                    ((dt.getMonth() + 1) < 10 ? ('0' + (dt.getMonth() + 1)) : (dt.getMonth() + 1)) + '-' +
                    (dt.getDate() < 10 ? ('0' + dt.getDate()) : dt.getDate()) + ' ' +
                    (dt.getHours() < 10 ? ('0' + dt.getHours()) : dt.getHours()) + ':' +
                    (dt.getMinutes() < 10 ? ('0' + dt.getMinutes()) : dt.getMinutes()) 
                    // (dt.getSeconds() < 10 ? ('0' + dt.getSeconds()) : dt.getSeconds())
            } else {
                return ''
            }
        },
        // 启用、停用
        status(row){
            this.confirmRow = row;
            let name = row.status==1?'停用':'启用';
            this.$refs.confirmDeleteRef.open("操作确认","该物业公司下所有账号也都将"+name+"，是否执行此操作？","warning")
        },
        confirmDeleteTrue(){
            let name = this.confirmRow.status==1?'停用':'启用',
            status = this.confirmRow.status==1?0:1
            enable({orgId: this.confirmRow.orgId, status }).then(response => {
                if(response.success) {
                    this.$message.success({
                        message: name+'成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load()
                }
            })
        },
    }
})
</script>

<style scoped>
</style>